<template>
    <view class="index" :style="[pageStyle]" :class="themeName">
        <!-- #ifndef  H5 -->
       <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
            <u-navbar
                :is-back="false"
                :title="styles.title"
                :title-bold="true"
                :is-fixed="false"
                :border-bottom="false"
                :title-color="percent > 0.5 ? '#000' : styles.title_color == 1 ? '#fff' : '#000'"
                :background="{ background: 'rgba(256,256, 256,' + percent + ')' }"
            ></u-navbar>
        </u-sticky>
        <!-- :title-color="styles.title_color == 1 ? '#fff' : '#000'" -->
        <!-- #ifdef MP -->
        <view class="capsule-tips flex" v-if="offTip">
            <text class="m-r-10">添加到”我的小程序”</text>
            <u-icon name="close" color="#FFFFFF" @click="clearIntervalFunc"></u-icon>
        </view>
        <!-- #endif -->
        <!-- #endif -->
		
		<!-- start app 版本更新弹窗 -->
		<!-- <u-popup :show="versionUpdateVisible" @close="versionUpdateClose" @open="versionUpdateOpen">
			
		</u-popup> -->
		<!-- <view class="version-update-wrap">
			<u-modal 
				v-model="versionUpdateVisible"
				class="" 
				:show-title="false"
				title="23" 
				:showConfirmButton="false" 
				:showCancelButton="false">
				<view>
					<vupdate @update="updateApk"></vupdate>
				</view>
				<view slot="confirmButton	"></view>
			</u-modal>
		</view> -->
		<vupdate :from="updateApkForm"></vupdate>
		
		
		<!-- end app 版本更新弹窗 -->
        
		
        <!-- <bubble top="300rpx" :page="1" :discharge="isDischarge"></bubble> -->
        <lazy-component v-for="(item, index) in pagesData" :key="index">
            <view>
                <template v-if="item.name == 'search' && item.show">
                   
                    <!-- #ifdef H5 -->
                  <!-- <u-sticky :offset-top="0" bg-color="#ff8200" h5-nav-height="0">
                        <view style="background-color:#ff8200 ;">
                            <w-search :content="item.content" :styles="item.styles" />
                        </view>
                    </u-sticky> -->
                     <w-search :content="item.content" :styles="item.styles" />
                    <!-- #endif -->
                    
                    <!-- #ifndef H5 -->
                    <!-- <view style="background-color:#ff8200 ;"> -->
                        <w-search :content="item.content" :styles="item.styles" />
                    <!-- </view> -->
                    <!-- #endif -->
                   
                   
                </template>
                <template v-else-if="item.name == 'navigationcard' && item.show">
                    <w-navigationcard :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'banner' && item.show">
                    <w-banner :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'title' && item.show">
                    <w-title :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'rubik' && item.show">
                    <w-rubik :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'notice' && item.show">
                    <w-notice :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'blank' && item.show">
                    <w-blank :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'separate' && item.show">
                    <w-separate :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'goodsgroup' && item.show">
                    <w-goodsgroup :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'goodsgroupcard' && item.show">
                    <w-goodsgroupcard :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'tabs' && item.show">
                    <w-tabs :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'coupon' && item.show">
                    <w-coupon
                        :content="item.content"
                        :styles="item.styles"
                        @refresh="getPageInfo"
                    />
                </template>
                <template v-else-if="item.name == 'seckill' && item.show">
                    <w-seckill :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'spellgroup' && item.show">
                    <w-spellgroup :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'video' && item.show">
                    <w-video :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'graphic' && item.show">
                    <w-graphic :content="item.content" :styles="item.styles" />
                </template>
                <template v-else-if="item.name == 'hotarea' && item.show">
                    <w-hotarea :content="item.content" :styles="item.styles" />
                </template>
                <!-- #ifdef MP-WEIXIN -->
                <template v-else-if="item.name == 'mnplive' && item.show">
                    <w-mnplive :content="item.content" :styles="item.styles" />
                </template>
                <!-- #endif -->
            </view>
            <view slot="skeleton" style="height: 20vh"></view>
        </lazy-component>
        <!-- #ifndef APP-PLUS -->
        <tabbar />
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <tabbar v-show="showTabbar" />
        <!-- #endif -->
        <index-skeleton v-show="loading" />
        <u-back-top
            :scroll-top="scrollTop"
            :top="1000"
            :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
        >
        </u-back-top>

	
        <!-- #ifdef APP-PLUS -->
        <lyg-popup
            v-if="appConfig.app_pop_agreement"
            title="用户使用及隐私保护政策提示"
            protocolPath="/pagesUser/pages/server_explan/server_explan?type=1"
            policyPath="/pagesUser/pages/server_explan/server_explan?type=2"
            policyStorageKey="has_read_privacy"
        >
        </lyg-popup>
        <!-- #endif -->
        <!-- #ifdef MP -->

        <!-- 用户隐私协议弹框 -->
        <privacy-popup v-model="showPrivacyPopup" @showopen="handleoPenAd"></privacy-popup>
        <!-- #endif -->

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
        <!-- 弹出广告 -->
        <open-advertisement v-if="showopenAd"></open-advertisement>
    </view>
</template>
<script>
import { apiIndex } from '@/api/store'
import { apiVisit } from '@/api/app'
import { mapActions } from 'vuex'
import openAdvertisement from '../../components/open-advertisement/open-advertisement.vue'
import vupdate from "./vupdate.vue"
import ApkUpdate from './ApkUpdate'
export default {
	name: 'Home',
	mixins:[],
    components: { openAdvertisement, vupdate },
    data() {
        return {
            isDischarge: false,
            styles: {},
            pagesData: [],
            loading: true,
            scrollTop: 0,
            policyStorageKey: 'had_read_privacy', // 保存是否同意协议缓存信息的key
            showTabbar: true, // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
            percent: 0,
            offTip: false,
            showPrivacyPopup: false, //微信用户隐私协议
            showopenAd: false,
			versionUpdateVisible: false, // app 版本更新弹窗
			versionUpdateInfo:{
				update:false,
				wgtUrl:'',
				version:'',
				name:''
			},
			updateApkForm1: {
				app_is_update: 0,
				app_upbg_image: '',
				app_wgt_file: '',
				app_version: '',
				app_up_content: '',
			}
			
        }
    },
	computed: {
	    pageStyle() {
	        const { background_color, background_image, background_type } = this.styles
	        if (background_type == 0) return
	        const style =
	            background_type == 1
	                ? {
	                      'background-color': background_color
	                  }
	                : {
	                      'background-image': `url(${background_image})`
	                  }
	        return style
	    },
		updateApkForm() {
			if (this.appConfig && Object.keys(this.appConfig).length) {
				const { app_is_update, app_upbg_image, app_wgt_file, app_version, app_up_content } = this.appConfig
				return {
					app_is_update: app_is_update || 0,
					app_upbg_image: app_upbg_image || '',
					app_wgt_file: app_wgt_file || '',
					app_version: app_version || '',
					app_up_content: app_up_content ||'',
				}
			}
			return {
				app_is_update: 0,
				app_upbg_image: '',
				app_wgt_file: '',
				app_version: '',
				app_up_content: '',
			}
			
		}
	    // // #ifdef APP-PLUS
	    // // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
	    // showTabbar() {
	    // 	let isShow = false
	    // 	return uni.getStorageSync(this.policyStorageKey);
	    // },
	    // // #endif
	},
    methods: {
        ...mapActions(['getConfig', 'getDecorateConfig', 'getUser']),
        handleRetry() {
            this.getConfig()
            this.getDecorateConfig()
            this.getUser()
        },
        getPageInfo() {
            apiIndex()
                .then((res) => {
                    const {
                        common: { title },
                        common,
                        content
                    } = res

                    uni.setNavigationBarTitle({
                        title
                    })
                    this.styles = common
                    this.tempData = content.map((item, index) => {
                        return {
                            index,
                            value: item
                        }
                    })
                    this.splitSetData()
                })
                .finally(() => {
                    uni.stopPullDownRefresh()
                    this.loading = false
                })
        },
        splitSetData() {
            const item = this.tempData.shift()
            if (!item) return
            this.$set(this.pagesData, item.index, Object.freeze(item.value))
            setTimeout(() => {
                this.splitSetData()
            }, 100)
        },
        onPageScroll(e) {
            const top = uni.upx2px(100)
            const { scrollTop } = e
            this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
        },
        clearIntervalFunc() {
            this.offTip = false
        },
        clearTipAuto() {
            let timeid = null
            if (timeid) {
                clearTimeout(timeid)
            }
            timeid = setTimeout(() => {
                this.clearIntervalFunc()
            }, 5000)
        },
        handleoPenAd() {
            this.showopenAd = true
        },
		versionUpdateClose() {
			
		},
		versionUpdateOpen(){
			
		},
		versionChecked() {
			// this.$u.post('publics/api.update/index', {
			// 	version: 1,
			// 	name: '掌上云仓'
			// })
			// #ifdef APP-PLUS
			const vm = this
			// this.checkedVersion('publics/api.update/index').then((res) => {
			// 	vm.versionUpdateVisible = true
			// }).catch()
			// #endif
		},
		updateApk() {
			this.downLoadApk(versionUpdateInfo.wgtUrl)
		}
		
    },
    
    onPullDownRefresh() {
        this.getPageInfo()
    },
    onPageScroll(e) {
        const { scrollTop } = e
        this.scrollTop = scrollTop
    },
    onLoad() {
        uni.hideTabBar()
        // #ifdef MP-WEIXIN
        wx.getPrivacySetting({
            success: (res) => {
                console.log(res, '------') // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
                if (res.needAuthorization) {
                    // 需要弹出隐私协议
                    this.showPrivacyPopup = true
                } else {
                    this.showopenAd = true
                }
            },
            fail: (err) => {
                console.log(err)
            }
        })
        // #endif
        // #ifndef MP
        this.showopenAd = true
        // #endif

        this.getPageInfo()
        // 访客记录
        apiVisit()
		this.versionChecked()
		
    },
	
    onHide() {
        this.isDischarge = true
    },
    onShow() {
        this.isDischarge = false
        // #ifdef MP
        wx.getUpdateManager().onUpdateReady(function () {
            wx.showModal({
                title: '更新提示',
                content: '新版本已经准备好，是否重启应用？',
                success(res) {
                    if (res.confirm) {
                        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                        wx.getUpdateManager().applyUpdate()
                    }
                }
            })
        })
        // #endif
    },
    watch: {},
    onReady() {
        // #ifdef MP

        const _this = this
        wx.checkIsAddedToMyMiniProgram({
            success(res) {
                if (!res.added) {
                    _this.offTip = true
                    _this.clearTipAuto()
                } else {
                    return
                }
            }
        })
        // #endif
    }
}
</script>

<style lang="scss">
.index {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    min-height: calc(100vh - env(safe-area-inset-bottom));
	// background-image: linear-gradient(to bottom, #ff8200 0%, #F7F7F7 500rpx);
    /* #ifdef H5 */
     background-image: linear-gradient(to bottom, #ff8200 0%, #ffffff 140rpx);
    /* #endif */
    /* #ifndef H5 */
     background-image: linear-gradient(to bottom, #ff8200 0%, #ffffff 320rpx);
    /* #endif */
   
}

// 胶囊提示
.capsule-tips {
    color: #ffffff;
    padding: 12rpx 18rpx;
    border-radius: 14rpx;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 9999;
    right: 25rpx;
}
.capsule-tips::after {
    content: '';
    border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
    border-right: 14rpx solid transparent;
    border-left: 14rpx solid transparent;
    position: absolute;
    top: -14rpx;
    right: 88rpx;
}

</style>

<style lang="scss">
	.version-update-wrap {
	
		
	}
	
	
</style>
